<template>
  <div class="app-container">
   
    <p> <strong>指标卡15分钟更新一次数据</strong></p>
    <Card ref="card" :list="list" />
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <el-radio-group v-model="radio1" @change="radio1Change" style="margin-bottom:12px;">
        <el-radio-button label="daily">按日</el-radio-button>
        <el-radio-button label="total">累计</el-radio-button>
      </el-radio-group>
       <p><strong>趋势图T+1更新，截止到昨天数据</strong></p>
      <line-chart ref="chart1" :chart-data="lineChartDto" />
    </el-row>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <el-radio-group v-model="radio2" @change="radio2Change" style="margin-bottom:12px;">
        <el-radio-button label="daily">按日</el-radio-button>
        <el-radio-button label="total">累计</el-radio-button>
      </el-radio-group>
       <p><strong>趋势图T+1更新，截止到昨天数据</strong></p>
      <line-chart2 ref="chart2" :chart-data="lineChartDto" />
    </el-row>
  </div>
</template>

<script>
import Card from "./components/card.vue";
import LineChart from "./components/lineChart";
import LineChart2 from "./components/lineChart2";
import { apiStatistics } from "@/api/overview/index";

export default {
  components: {
    Card,
    LineChart,
    LineChart2
  },
  data() {
    return {
      lineChartDto: {},
      list: [
        {
          title: "今日签署借条",
          count: "0",
          desc: [
            { label: "创建", value: "0" },
            { label: "支付", value: "0" }
          ]
        },
        {
          title: "昨日签署借条",
          count: "0",
          desc: [
            { label: "创建", value: "0" },
            { label: "支付", value: "0" }
          ]
        },
        {
          title: "累计签署借条",
          count: "0",
          desc: [
            { label: "创建", value: "0" },
            { label: "支付", value: "0" }
          ]
        },
        { title: "今日支付金额", count: "0" },
        { title: "昨日支付金额", count: "0" },
        {
          title: "累计支付金额",
          count: "0",
          desc: [{ label: "退款", value: "0" }]
        }
      ],
      radio1: "daily",
      radio2: "daily"
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    radio1Change(e) {
      this.$refs.chart1.setOptions({ mode: e });
    },
    radio2Change(e) {
      this.$refs.chart2.setOptions({ mode: e });
    },
    getData() {
      apiStatistics().then(res => {
        if (res.code == 200) {
          const { iouData, paymentData, lineChartDto } = res.data;
          let chartData = {
            dateList: lineChartDto.dateList
          };
          lineChartDto.eventTrendList.forEach(item => {
            chartData[item.name] = item.data;
          });
          this.lineChartDto = chartData;
          console.log(this.lineChartDto, "  this.lineChartDto");
          this.list = [
            {
              title: "今日签署借条",
              count: iouData.var1,
              desc: [
                { label: "创建", value: iouData.var2 },
                { label: "支付", value: iouData.var3 }
              ]
            },
            {
              title: "昨日签署借条",
              count: iouData.var4,
              desc: [
                { label: "创建", value: iouData.var5 },
                { label: "支付", value: iouData.var6 }
              ]
            },
            {
              title: "累计签署借条",
              count: iouData.var7,
              desc: [
                { label: "创建", value: iouData.var8 },
                { label: "支付", value: iouData.var9 }
              ]
            },
            { title: "今日支付金额", count: paymentData.var1 / 100 },
            { title: "昨日支付金额", count: paymentData.var2 / 100 },
            {
              title: "累计支付金额",
              count: paymentData.var3 / 100,
              desc: [{ label: "退款", value: paymentData.var4 / 100 }]
            }
          ];
        }
      });
      setTimeout(() => {
        this.getData();
      }, 1000 * 60 * 15);
    }
  }
};
</script>
<style scoped lang='scss'>
strong{
  color: #666;
  font-weight: normal;
  font-size: 14px;
}
</style>
